<!--
 * @Author: zhuxiaoyi
 * @Date: 2023-06-05 16:01:56
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-12-10 15:56:34
 * @Description: 
-->
<template>
    <el-dialog :modelValue="props.dialogStatus" title="参数配置" width="1050px" center @open="dialogOpenHandler(ruleFormRef)"
        @close="closeAadTaskDialog">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" :size="''"
            status-icon>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="任务名称" prop="taskname">
                        <el-input v-model="ruleForm.taskname" clearable placeholder="请输入任务名称（必填）" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="任务类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请输入任务类型（必填）" @change="typeChangeHandler"
                            style="width: 100%;">
                            <el-option label="地物反演" value="400" />
                            <el-option label="土地分类" value="500" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="任务别名" prop="taskalias">
                        <el-input v-model="ruleForm.taskalias" clearable placeholder="请输入任务别名（非必填）" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="任务编码" prop="code">
                        <el-input-number v-model="ruleForm.code" :min="Number(ruleForm.type)"
                            :max="Number(ruleForm.type) + 9" style="width: 100%;" placeholder="请选择任务编码（必填）" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="任务状态" prop="taskstatus">
                        <el-radio-group v-model="ruleForm.taskstatus">
                            <el-radio-button label="关闭" />
                            <el-radio-button label="开启" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="任务描述" prop="mark">
                        <el-input v-model="ruleForm.mark" type="textarea" placeholder="请填写任务描述（非必填）" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="投影参数">
                        <el-input v-model="ruleForm.projective" clearable placeholder="请输入投影参数,若不填则为全部" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="数据格式">
                        <el-input v-model="ruleForm.dataFormat" clearable placeholder="请填写数据格式，若不填则为全部" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="波段数量" prop="dataBand">
                        <el-input-number v-model="ruleForm.dataBand" :min="1" :max="100" style="width: 100%; "
                            placeholder="请选择波段数量（必填）" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="数据类型" prop="dataType">
                        <el-select v-model="ruleForm.dataType" placeholder="数据类型" style="width: 100%; ">
                            <el-option v-for="item in dataTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="规则文件" prop="ruleFile">
                        <el-upload ref="ruleUploadInstance" v-model:file-list="ruleFileList" class="upload-demo"
                            :action="BASE_URL + '/upload/file?type=1'" :headers="uplodHeader" :before-remove="beforeRemove"
                            :limit="1" :on-exceed="ruleOnExceed" drag style="width: 100%; "
                            :on-success="ruleFileUploadSuccess" accept='.clf' :on-remove="ruleFileRemoveHandler">
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                                在这里拖放文件或单击<em>上传</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    支持文件尺寸小于200M
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="模型文件" prop="modelFile">
                        <el-upload v-model:file-list="modelFileList" class="upload-demo"
                            :action="BASE_URL + '/upload/file?type=2'" :headers="uplodHeader" :before-remove="beforeRemove"
                            :limit="1" :on-exceed="modelOnExceed" drag style="width: 100%;"
                            :on-success="modelFileUploadSuccess" accept='.rar, .model'>
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                                在这里拖放文件或单击<em>上传</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    支持文件尺寸小于200M
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col> -->
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAadTaskDialog()">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, Ref } from 'vue'
import { ElMessage, ElMessageBox, genFileId } from 'element-plus'
import type { FormInstance, FormRules, UploadProps, UploadUserFile, UploadInstance, UploadRawFile } from 'element-plus'
import { Document, Plus, Edit, Delete, Upload, FolderAdd, UploadFilled } from '@element-plus/icons-vue'
import { getToken, setToken, removeToken } from "@/utils/auth";
import * as _ from "lodash";
import BASE_URL from '@/api/baseUrl'

const props = defineProps<{
    dialogStatus: boolean
}>();

interface taskInfo {
    id?: number;
    code: number;
    taskname: string;
    taskstatus: number | string;
    taskalias: string;
    type: string;
    mark?: string;
    ruleFile?: string;
    modelFile?: string;
    ruleStore?: any;
    modelStore?: any;
    taskShow: string;
    dataBand: number,
    dataFormat: string,
    dataType: string,
    projective: string
}
// 定义emit事件
const emit = defineEmits({
    'onSubmit': null,
    'closeAadTaskDialog': null
})
const ruleFileRemoveHandler = function (file, fileList) {
    if (fileList.length == 0) {
        ruleForm.ruleFile = ''
    }
}
const modelFileRemoveHandler = function (file, fileList) {
    if (fileList.length == 0) {
        ruleForm.modelFile = ''
    }
}
const dataTypeOptions = [
    {
        value: "0",
        label: '全部',
    },
    {
        value: "1",
        label: '8-bit unsigned integer',
    },
    {
        value: "2",
        label: '16-bit unsigned integer',
    },
    {
        value: "3",
        label: '16-bit signed integer',
    },
    {
        value: "4",
        label: '32-bit unsigned integer',
    },
    {
        value: "5",
        label: '32-bit signed integer',
    },
    {
        value: "6",
        label: '32-bit floating point',
    },
    {
        value: "7",
        label: '64-bit floating point',
    },
]

const ruleFormRef = ref<FormInstance>()
const ruleForm: taskInfo = reactive({
    taskname: '',
    taskalias: '',
    type: '500',
    code: 501,
    taskstatus: '关闭',
    mark: '',
    modelFile: '',
    ruleFile: '',
    taskShow: '1',
    projective: "WGS 84",//投影参数
    dataFormat: "GTiff", //数据格式
    dataBand: 4, //波段信息，
    dataType: "1" //数据类型
})
const rules = reactive<FormRules>({
    code: [
        { required: true, message: '请输入状态编码', trigger: 'blur' },
    ],
    dataBand: [
        { required: true, message: '请选择波段数量', trigger: 'blur' },
    ],
    taskname: [
        {
            required: true,
            message: '请填写任务名称',
            trigger: 'change',
        },
    ],
    type: [
        {
            required: true,
            message: '请选择任务类别',
            trigger: 'change',
        },
    ],
    dataType: [
        {
            required: true,
            message: '请选择数据类型',
            trigger: 'change',
        },
    ],
    taskstatus: [
        {
            required: true,
            message: '请设置任务状态',
            trigger: 'change',
        },
    ]
})
// 定义props属性
const typeChangeHandler = function (type: number) {
    ruleForm.code = Number(type) + 1
}

const uplodHeader = {
    token: getToken()
}

const ruleFileList = ref<UploadUserFile[]>([

])
const modelFileList = ref<UploadUserFile[]>([

])

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `确定要取消上传/关联当前文件 ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            emit('onSubmit', ruleForm)

        } else {
            console.log('error submit!', fields)
        }
    })
}
const dialogOpenHandler = function (formEl: FormInstance | undefined) {
}
const closeAadTaskDialog = function () {
    emit('closeAadTaskDialog')
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const ruleOnExceed = function () {
    if (ruleFileList.value.length > 0) {
        ElMessage({
            message: '规则文件最大数量为1',
            type: 'info',
        })
    }
}
const modelOnExceed = function () {
    if (modelFileList.value.length > 0) {
        ElMessage({
            message: '模型文件最大数量为1',
            type: 'info',
        })
    }
}
const ruleFileUploadSuccess = function (res: any) {
    ruleForm.ruleFile = res.data.fileId
}
const modelFileUploadSuccess = function (res: any) {
    ruleForm.modelFile = res.data.fileId
}


defineExpose({ resetForm, ruleFormRef });

</script>

<style lang="scss" scoped>
.el-upload__tip {
    color: #999;
}
</style>
<style lang="scss"></style>